<template>
  <div class="jaguar-view">
    <div class="jaguar-search"></div>

    <div class="jaguar-control"></div>

    <Card>
      <template #content>
        <DataTable :value="tableData" :loading="loading">
          <Column field="serverId" header="服务ID" />
          <Column field="serverName" header="服务名称" />
          <Column field="scopes" header="接口权限范围">
            <template #body="scope">
              <Tag v-for="s in scope.data.scopes" :key="s">
                {{ s }}
              </Tag>
            </template>
          </Column>
          <Column header="操作">
            <template #body="scope">
              <delete-button @confirm="handleDelete(scope.data)" />
            </template>
          </Column>
        </DataTable>
      </template>
    </Card>
  </div>
</template>
<script>
import { fetchList, del } from '@/api/upms/resourceServer'

export default {
  name: 'ResourceServer',
  data() {
    return {
      loading: false,
      tableData: [],
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      fetchList()
        .then((res) => {
          let data = res.data.data
          for (let i in data) {
            let scopes = data[i].scopes
            scopes.sort()
          }
          this.tableData = data
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleDelete(row) {
      del(row.id).then(() => {
        this.$message.success('删除成功')
        this.getData()
      })
    },
  },
}
</script>
